<template>
	<el-form
		ref="form"
		class="plr-1"
		label-position="top"
		label-width="40px"
		:model="form"
		:disabled="saving"
	>
		<el-form-item label="背景图">
			<el-upload
				drag
				list-type="picture"
				:headers="{ token }"
				:before-upload="beforeUpload"
				:file-list="fileList"
				:data="fileData"
				:on-progress="uploadProgress"
				:on-error="uploadError"
				:on-success="uploadSuccess"
				:action="`${baseUrl}/index/uposs`"
				accept="image/*"
				:show-file-list="false"
			>
				<i class="el-icon-upload" />
				<div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
			</el-upload>
			<template v-if="fileList.length > 0">
				<div v-for="item in fileList" :key="item.uid" class="images-item">
					<span
						class="el-icon-close remove"
						@click="handleRemove()"
						v-if="item.status != 'uploading'"
					/>
					<div class="images-item__show">
						<el-image
							class="img"
							:src="item.url"
							fit="contain"
							:preview-src-list="previewList"
						/>
						<div class="images-item__show--right">
							<div class="ellipsis">{{ item.name }}</div>
							<el-progress
								v-if="item.status == 'uploading'"
								:stroke-width="2"
								:percentage="item.percentage"
								:format="percentageFormat"
							/>
						</div>
					</div>
				</div>
			</template>
		</el-form-item>
	</el-form>
</template>
<script>
import { baseUrl } from "@/config/env";
import dayjs from "dayjs";
import { mapGetters } from "vuex";

export default {
	props: {
		saving: Boolean,
		view: {
			type: Object,
			default: () => ({})
		},
		config: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			baseUrl,
			form: this.view.options,
			fileData: {},
			fileList: []
		};
	},
	computed: {
		...mapGetters(["token"]),
		previewList() {
			return this.fileList.map(v => v.url);
		}
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			const { bg_img, bg_img_name } = this.form;
			if (bg_img) {
				this.fileList = [{ url: bg_img, name: bg_img_name }];
			}
		},
		handleRemove() {
			this.form.bg_img = "";
			this.form.bg_img_name = "";
			this.fileList = [];
		},
		percentageFormat(percentage) {
			return this.toFixed(percentage) + "%";
		},
		// 上传文件
		beforeUpload(file) {
			this.fileData.name = file.name;
			this.fileData.dirname = "upload/" + dayjs().format("YYYY-MM-DD");
			return true;
		},
		// 文件上传时
		uploadProgress(evt, file) {
			// console.log("文件上传时", file);
			this.fileList = [file];
		},
		// 上传成功
		uploadSuccess(res, file) {
			this.form.bg_img = res.data;
			this.form.bg_img_name = file.name;
			this.fileList = [file];
			this.$message.success("上传成功");
			this.view.options = this.form;
		},
		// 上传失败
		uploadError(err) {
			// console.log("上传失败");
			const error = JSON.parse(err.message);
			this.init();
			this.$message.error(error.msg);
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-upload,
	.el-upload-dragger {
		width: 100%;
	}
	.el-upload-dragger {
		height: 120px;
		.el-icon-upload {
			margin-top: 15px;
		}
	}
}
.images-item {
	border: solid 1px #e0e0e0;
	border-radius: 3px;
	padding: 10px 8px 14px;
	margin: 10px 0;
	position: relative;
	.remove {
		position: absolute;
		right: 10px;
		top: 10px;
		color: grey;
		cursor: pointer;
	}
	&__show {
		display: flex;
		align-items: center;
		.img {
			width: 100px;
			height: 80px;
			border: solid 1px #e0e0e0;
			border-radius: 3px;
		}
		&--right {
			flex: 1;
			overflow: hidden;
			padding-left: 10px;
		}
	}
	::v-deep .el-form-item {
		margin-bottom: 0;
	}
}
</style>
